<template>
    <app-page>
        <img class="login-bg" src="@/static/images/loginBG.png" alt="">
        <app-navbar title="" :show-left="true" bg="transparent"></app-navbar>
        <view class="padding-content flex flex-wrap w-full items-between">
            <view class="w-full">
                <view class="page-title flex flex-col flex-wrap justify-center items-center">
                    <wd-img custom-class="title-img" :src="loginLogo"></wd-img>
                    <text class="title-text h-56rpx lh-56rpx mb-116rpx mt-30rpx">找回密码</text>
                </view>
                <wd-form ref="loginForm" class="login-form" :model="loginMap">
                    <view class="form-block m-32rpx shadow-block px-40rpx mb-56rpx">
                        <wd-input custom-class="login-input" v-model="loginMap.username" label="" label-width="100rpx"
                            prop="username" prefix-icon="none" inputmode="numeric" placeholder="请输入手机号"
                            :required="false" :maxlength="11" :rules="[{ required: true, message: '请输入手机号' }]">
                            <template #prefix>
                                <wd-img :src="phoneIcon" height="32rpx" width="32rpx"></wd-img>
                            </template>

                        </wd-input>
                        <wd-input no-border custom-class="login-input" v-model="loginMap.code" label=""
                            label-width="100rpx" prefix-icon="none" prop="code" inputmode="numeric" placeholder="请输入验证码"
                            :required="false" :maxlength="6" :rules="[{ required: true, message: '请输入验证码' }]">
                            <template #prefix>
                                <wd-img :src="codeIcon" height="32rpx" width="32rpx"></wd-img>
                            </template>
                            <template #suffix>
                                <wd-button type="text" size="small" :disabled="timeCount !== 60" block
                                    @click="handleSMS">{{
                                    timeCount === 60 ? '获取验证码' : `${timeCount}秒后重试`
                                    }}</wd-button>
                            </template>
                        </wd-input>
                        <wd-input no-border custom-class="login-input" v-model="loginMap.password" label=""
                            label-width="100rpx" prefix-icon="none" prop="password" show-password placeholder="请输入新密码"
                            :rules="[{ required: true, message: '请输入新密码' }]">
                            <template #prefix>
                                <wd-img :src="pwdIcon" height="32rpx" width="32rpx"></wd-img>
                            </template>
                        </wd-input>
                        <wd-input no-border custom-class="login-input" v-model="loginMap.confirmPassword" label=""
                            label-width="100rpx" prefix-icon="none" prop="confirmPassword" show-password
                            placeholder="确认新密码" :rules="[{ required: true, message: '请再次输入新密码' }]">
                            <template #prefix>
                                <wd-img :src="pwdIcon" height="32rpx" width="32rpx"></wd-img>
                            </template>
                        </wd-input>
                    </view>
                    <view class="footer px-64rpx">
                        <wd-button custom-class="button gradient-btn" type="primary" size="large" block
                            @click="loginMap.handleLogin">确定</wd-button>
                    </view>
                </wd-form>
            </view>
        </view>
    </app-page>
</template>

<script lang="ts" setup>
import { throttle } from "lodash-es";
import { reactive, ref } from "vue";
import { sendCodeReq } from "@/api/login";
import loginLogo from "@/static/icon/login/loginLogo.png";
import phoneIcon from "@/static/icon/login/phone.png";
import codeIcon from "@/static/icon/login/code.png";
import pwdIcon from "@/static/icon/login/pwd.png";
import { useSystemStore } from "@/stores/system";
import ToastManager from "@/utils/toast";

const useStore = useSystemStore();
const loginForm = ref();
const argeeValue = ref(false);
const loginMode = ref<0 | 1>(0);
// 由于找不到 NodeJS 命名空间，使用 any 类型替代
const codeTimer = ref<any>();
const timeCount = ref(60);
const loginMap = reactive({
    username: "",
    password: "",
    confirmPassword: "",
    code: "",
    async handleLogin() {
        loginForm.value.validate().then((result: any) => {
            if (result.valid) {
                const params: any = {
                    username: loginMap.username,
                    password: loginMap.password,
                    code: loginMap.code
                };
                if (loginMode.value === 1) {
                    delete params.password;
                } else {
                    delete params.code;
                }
                useStore.login(params);
                // 登录逻辑
            }
        }).catch((error: any) => {
            console.log(error, "error");
        });
    }
});
const handleChangeMode = throttle(() => {
    loginMode.value = loginMode.value === 1 ? 0 : 1;
}, 1000);
const handleSMS = throttle(() => {
    console.log("handleSMS");
    if (loginMap.username) {
        sendCodeReq({ phone: loginMap.username }).then(() => {
            codeTimer.value = setInterval(() => {
                timeCount.value -= 1;
                if (timeCount.value === 0) {
                    clearInterval(codeTimer.value);
                    timeCount.value = 60;
                }
            }, 1000);
        });
    } else {
        ToastManager.toast({ title: "请输入手机号", icon: "none" });
    }
    // 获取验证码逻辑
}, 1000);
function setArgeeValue(value: boolean) {
    argeeValue.value = value;
}
function toForget() {

}
</script>

<style lang="scss" scoped>
.title-img {
    width: 272rpx;
    height: 80rpx;
    margin-top: 116rpx;
}

.title-text {
    font-size: 40rpx;
    font-weight: 800;
    color: var(--color-heavy);
}

.login-form {
    border-radius: 16rpx;
    // background: #f0f0f0;
    // box-shadow: -8px 8px 16px #e9e9e9,
    //   8px -8px 16px #f7f7f7;
    // padding: 32rpx;
    // height: 100%;

    .wd-cell-group,
    .wd-cell-group__body {
        background: transparent !important;
    }

    .wd-tabs__nav-item {
        height: 46rpx;
    }

    .wd-tabs__line {}
}

.login-mode {
    color: var(--wot-color-theme);
    padding: 32rpx 0;
}

.padding-content {
    z-index: 9;
    position: inherit;
    padding: 0;
    align-content: space-between;
    min-height: 100vh;
    box-sizing: border-box;
}

.form-block {
    border-radius: 12rpx;
    background: var(--color-white);
    position: relative;
}

.login-input {
    height: 160rpx;
    border-top: 1px solid var(--color-border);
    --at-apply: flex items-center;

    .wd-input__value {
        align-content: center;
        height: 100%;
    }
}
</style>